<template>
	<view class="wallet_page">
		<view class="top">
			<image src="../../static/wallet/wallet.png"></image>
		</view>
		<view class="box">
			<view class="yue_text_box">
				<image src="../../static/wallet/mm.png"></image>
				<view>账户余额 (元)</view>
			</view>
			<view class="money">{{user_info.money}}</view>
			<view class="btns">
				<view class="btn1" @click="toPage()">充值</view>
				<view class="btn2" @click="toCashOut()">提现</view>
			</view>
		</view>
	    <view class="othens">其他服务</view>
		<view class="othens_box">
			<view class="othens_item" @click="toDetail()">
				<image src="../../static/wallet/mingxi.png"></image>
				<view>账户明细</view>
			</view>
			<view class="othens_item" @click="toCoupon()">
				<image src="../../static/wallet/couppon.png"></image>
				<view>优惠券</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {userInfo} from "../../api/index.js"
	export default {
		data() {
			return {
				user_info:[]
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			getInfo(){
				userInfo().then(res=>{
					this.user_info=res.data
					console.log(res);
				})
			},
			toPage(){
				uni.navigateTo({
					url:'/pages/wallet/recharge'
				})
			},
			toCashOut(){
				uni.navigateTo({
					url:"/pages/wallet/cashout"
				})
			},
			toDetail(){
				uni.navigateTo({
					url:"/pages/wallet/detail"
				})
			},
			toCoupon(){
				uni.navigateTo({
					url:"/pages/wallet/coupon"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.wallet_page{
	width: 100%;
	height: 90vh;
	background-color: #F9F9F9;
}
.top{
	width: 100%;
	height: 314rpx;
	image{
		width: 100%;
		height: 100%;
	}
}
.box{
	width: 686rpx;
	height: 356rpx;
	background-color: #FFFFFF;
	border-radius: 8rpx;
	margin: auto;
	transform: translateY(-250rpx);
	padding: 48rpx 0rpx;
	.yue_text_box{
		width: 100%;
		height: 40rpx;
		display: flex;
		image{
			width: 28rpx;
			height: 32rpx;
			margin-left: 224rpx;
		}
		view{
			line-height: 30rpx;
			color: #333333;
			font-size: 28rpx;
			font-weight: bold;
			margin-left: 16rpx;
		}
	}
	.money{
		width: 100%;
		height: 96rpx;
		text-align: center;
		margin: auto;
		font-size: 64rpx;
		color: #00CC7B;
		margin-top: 10rpx;
	}
	.btns{
		width: 100%;
		height: 76rpx;
		padding: 32rpx 102rpx;
		display: flex;
		justify-content: space-between;
		view{
			width: 224rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			border-radius: 8rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
		.btn1{
			background-color: #00CC7B;
			color: #FFFFFF;
		}
		.btn2{
			border: 2rpx #00CC7B solid;
			color: #000000;
		}
	}
}
.othens{
	font-size: 32rpx;
	color: #333333;
	font-weight: bold;
	margin-top: -214rpx;
	margin-left: 32rpx;
}
.othens_box{
	width: 686rpx;
	height: 144rpx;
	background-color: #FFFFFF;
	border-radius: 8rpx;
	margin-left: 32rpx;
	margin-top: 32rpx;
	padding: 48rpx 98rpx;
	display: flex;
			justify-content: space-between;
	.othens_item{
		display: flex;
		image{
			width: 48rpx;
			height: 48rpx;
			
		}
		view{
			line-height: 48rpx;
			margin-left: 12rpx;
		}
	}
}

</style>
